.extraPanelList {
  background: var(--f7-list-bg-color);
}
.extraPanelList .f7-icons {
  display: inline-block;
}

.toolbar.messagebar .messagebar-area {
  /* bottom: 57px; */
}

.record_voice {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.imgrecord,
.imgcancle {
  width: 100%;
  height: 100%;
}

.xcsgmessage .message2 .message-image {
  background: #cccccc;
}

.record_voice {
  background: beige;
}

.xcsgmessage .message-bubble {
  border-radius: 16px;
  padding: 15px 10px 10px 10px;
}

.xcsgmessage .message1 .message-bubble {
  padding: 0px 10px 0px 10px;
}

/*audio播放*/
.db {
  display: block;
}

.weixinAudio {
  line-height: 1.5;
}

.audio_area {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  margin: 0px 1px 0px 0;
  font-size: 0;
  position: relative;
  font-weight: 400;
  text-decoration: none;
  -ms-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  margin-top: -12px;
}

.audio_wrp {
  /* border: 1px solid #ebebeb; */
  /* background-color: #fcfcfc; */
  overflow: hidden;
  padding: 0px 20px 0px 12px;
}

.audio_play_area {
  float: left;
  /* margin: 9px 22px 10px 5px; */
  font-size: 0;
  width: 18px;
  height: 25px;
}

.audio_play_area_received {
  float: left;
  /* margin: 9px 22px 10px 5px; */
  font-size: 0;
  width: 18px;
  height: 25px;
}
.audio_play_area_sent {
  float: right;
  /* margin: 9px 22px 10px 5px; */
  font-size: 0;
  width: 18px;
  height: 25px;
}

.playing .audio_play_area .icon_audio_default {
  display: block;
}

.audio_play_area .icon_audio_default {
  background: transparent url(/src/assets/img/component/iconloop.png) no-repeat 0 0;
  width: 18px;
  height: 25px;
  vertical-align: middle;
  display: inline-block;
  -webkit-background-size: 54px 25px;
  background-size: 54px 25px;
  background-position: -36px center;
}
.audio_play_area_received .icon_audio_default_received {
  background: transparent url(/src/assets/img/component/iconloop-left.png) no-repeat 0
    0;
  width: 18px;
  height: 25px;
  vertical-align: middle;
  display: inline-block;
  -webkit-background-size: 54px 25px;
  background-size: 54px 25px;
  background-position: -36px center;
}
.audio_play_area_sent .icon_audio_default_sent {
  background: transparent url(/src/assets/img/component/iconloop-right.png) no-repeat
    0 0;
  width: 18px;
  height: 25px;
  vertical-align: middle;
  display: inline-block;
  -webkit-background-size: 54px 25px;
  background-size: 54px 25px;
  background-position: 0px center;
}

.audio_play_area .icon_audio_playing {
  background: transparent url(/src/assets/img/component/iconloop.png) no-repeat 0 0;
  width: 18px;
  height: 25px;
  vertical-align: middle;
  display: inline-block;
  -webkit-background-size: 54px 25px;
  background-size: 54px 25px;
  -webkit-animation: audio_playing 1s infinite;
  -moz-animation: audio_playing 1s infinite;
  -ms-animation: audio_playing 1s infinite;
  -o-animation: audio_playing 1s infinite;
  animation: audio_playing 1s infinite;
  background-position: 0px center;
  display: none;
}
.audio_play_area_received .icon_audio_playing_received {
  background: transparent url(/src/assets/img/component/iconloop-left.png) no-repeat 0
    0;
  width: 18px;
  height: 25px;
  vertical-align: middle;
  display: inline-block;
  -webkit-background-size: 54px 25px;
  background-size: 54px 25px;
  -webkit-animation: audio_playing_received 1s infinite;
  -moz-animation: audio_playing_received 1s infinite;
  -ms-animation: audio_playing_received 1s infinite;
  -o-animation: audio_playing_received 1s infinite;
  animation: audio_playing_received 1s infinite;
  background-position: 0px center;
  display: none;
}
.audio_play_area_sent .icon_audio_playing_sent {
  background: transparent url(/src/assets/img/component/iconloop-right.png) no-repeat
    0 0;
  width: 18px;
  height: 25px;
  vertical-align: middle;
  display: inline-block;
  -webkit-background-size: 54px 25px;
  background-size: 54px 25px;
  -webkit-animation: audio_playing_sent 1s infinite;
  -moz-animation: audio_playing_sent 1s infinite;
  -ms-animation: audio_playing_sent 1s infinite;
  -o-animation: audio_playing_sent 1s infinite;
  animation: audio_playing_sent 1s infinite;
  background-position: 0px center;
  display: none;
}

.audio_area .pic_audio_default {
  display: none;
  width: 18px;
}

.tips_global {
  color: #8c8c8c;
}

.audio_area .audio_length {
  float: right;
  font-size: 14px;
  margin-top: 3px;
  margin-left: 1em;
}

.audio_info_area {
  overflow: hidden;
}

.audio_area .audio_title {
  font-weight: 400;
  font-size: 17px;
  margin-top: -2px;
  margin-bottom: -3px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.audio_area .audio_source {
  font-size: 14px;
}

.audio_area .progress_bar {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #0cbb08;
  height: 2px;
}

.playing .audio_play_area .icon_audio_default {
  display: none;
}

.playing .audio_play_area_received .icon_audio_default_received {
  display: none;
}

.playing .audio_play_area_sent .icon_audio_default_sent {
  display: none;
}

.playing .audio_play_area .icon_audio_playing {
  display: inline-block;
}

.playing .audio_play_area_sent .icon_audio_playing_sent {
  display: inline-block;
}

.playing .audio_play_area_sent .icon_audio_playing_sent {
  display: inline-block;
}

.record {
  width: 100%;
  position: fixed;
  height: 180px;
  bottom: 160px;
  z-index: 1;
  text-align: center;
  z-index: 1;
  opacity: 6;
}

.record .record_voice {
  height: 100%;
  width: 240px;
  margin: 0 auto;
  background: #707070;
  opacity: 0.9;
}

.record .record_voice img {
  width: 120px;
  height: 120px;
  padding-top: 20px;
  margin: 0 auto;
}

.record .record_voice p {
  margin-top: 2px;
  color: white;
}

@-webkit-keyframes audio_playing {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}
@-moz-keyframes audio_playing {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}
@-ms-keyframes audio_playing {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}
@-o-keyframes audio_playing {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}
@keyframes audio_playing {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}

@-webkit-keyframes audio_playing_received {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}
@-moz-keyframes audio_playing_received {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}
@-o-keyframes audio_playing_received {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}
@-ms-keyframes audio_playing_received {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}
@keyframes audio_playing_received {
  0% {
    background-position: 0px center;
  }
  30% {
    background-position: 0px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: -36px center;
  }
  100% {
    background-position: -36px center;
  }
}

@-webkit-keyframes audio_playing_sent {
  0% {
    background-position: -36px center;
  }
  30% {
    background-position: -36px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: 0px center;
  }
  100% {
    background-position: 0px center;
  }
}
@-moz-keyframes audio_playing_sent {
  0% {
    background-position: -36px center;
  }
  30% {
    background-position: -36px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: 0px center;
  }
  100% {
    background-position: 0px center;
  }
}
@-ms-keyframes audio_playing_sent {
  0% {
    background-position: -36px center;
  }
  30% {
    background-position: -36px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: 0px center;
  }
  100% {
    background-position: 0px center;
  }
}
@-o-keyframes audio_playing_sent {
  0% {
    background-position: -36px center;
  }
  30% {
    background-position: -36px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: 0px center;
  }
  100% {
    background-position: 0px center;
  }
}
@keyframes audio_playing_sent {
  0% {
    background-position: -36px center;
  }
  30% {
    background-position: -36px center;
  }
  31% {
    background-position: -18px center;
  }
  61% {
    background-position: -18px center;
  }
  61.5% {
    background-position: 0px center;
  }
  100% {
    background-position: 0px center;
  }
}

.message2 .message-bubble {
  padding: 0px 10px 0px 10px;
  background: #fffaf0 !important;
  height: 25px;
}
/*audio播放*/

.playnavbar {
  background: black !important;
}

.xcsgmessage .messages:last-child {
  margin-bottom: 82px;
}

.message3 .message-bubble {
  background: none !important;
}

.message3 .message-image img {
  width: 200px;
  height: 100%;
}

.videoimg {
  width: 50px;
  height: 50px;
  position: absolute;
  /* 居中显示，100/2-50/2 */
  top: -webkit-calc(50% - 25px);
  left: -webkit-calc(50% - 25px);
  top: -moz-calc(50% - 25px);
  left: -moz-calc(50% - 25px);
  top: -moz-calc(50% - 25px);
  left: calc(50% - 25px);
}

.videoimg img {
  width: 100%;
  height: 100%;
}

.messageCount {
  top: -3px;
  position: absolute;
}

.xcsgmessage .page-content {
  overflow-y: auto;
  overflow-x: visible;
}
.downimg {
  margin-top: -100%;
}

.message-image small {
  color: white;
  margin-left: -25px;
  bottom: 30px;
  position: absolute;
}
.videodiv {
  text-align: center;
}

.xcsgmessage .messages-content {
  display: none;
}

.pointdetail .chanceDetail .card-header,
.pontlist .chanceDetail .card-header,
.scorecreate .chanceDetail .card-header {
  padding: 15px 15px 8px 12px;
}
.pontlist .chip {
  padding: 8px 2px 6px 2px !important;
}

.pdtitle .badge {
  font-size: 14px;
  margin-right: 8px;
}

.card-contenttitle {
  margin-top: -6px;
  min-height: 30px;
}

.unitlist .accordion-item-content a {
  max-width: 80px;
  font-size: 13pt !important;
  margin: 0 auto;
  height: 22pt !important;
  line-height: 26px !important;
}
.unitlist .accordion-item-content .block {
  padding-bottom: 15px;
}

.score-popup .list-group-title {
  height: 40px !important;
  line-height: 40px !important;
}

.score-popup .list {
  margin: 15px 0 !important;
}

.badgescore {
  font-size: 20px !important;
  color: white !important;
  width: 60px !important;
  height: 30px !important;
  line-height: 30px !important;
}